<template>
  <div class="app-bar">
    <var-bottom-navigation
      class="bottom-navigation-big"
      active-color="#06a6e9"
      z-index="999"
      :active="active"
      :safe-area="true"
      fixed
    >
      <var-bottom-navigation-item
        v-for="(item, index) in data"
        :key="item.name"
        @click="router_to"
        :class="
          isBig(index)
            ? 'bottom-navigation-big var-bottom-navigation__fab[var-bottom-navigation__fab]'
            : ''
        "
        :label="isBig(index) ? '' : item.name"
        :icon="item.icon"
      />
    </var-bottom-navigation>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import AppBar from "../../../../config/app_bar";
import { useRouter } from "vue-router";
import { routes } from "../../../route/router";
export default defineComponent({
  name: "app-bar",
  setup: () => {
    const router = useRouter();
    const active = ref(0);
    const data = ref(AppBar.touchBar);
    let len = data.len;
    function object_is_empty(obj) {
      if (!obj) {
        return true;
      }
      Reflect.ownKeys(obj).length > 0;
    }
    router.beforeEach((to, from) => {
      if (object_is_empty(to.meta)) {
        document.title = to.meta.title;
      } else {
        document.title = "未命名";
      }
      let index = find_index_by(routes, to.name);
      active.value = index;
    });

    function isBig(_index) {
      if (len % 2 === 1) {
        return true;
      }
      return _index % 2;
    }
    const router_to = function (ev) {
      active.value = ev;
      let __router = data.value[ev].router;
      if (__router && __router.trim() !== "") {
        router.push(__router);
      }
    };
    function find_index_by(arr, val) {
      let idx = -1;
      arr.forEach((item, index) => {
        if (item.name === val) {
          idx = index;
          return;
        }
      });
      return idx;
    }
    return {
      data,
      isBig,
      active,
      router_to,
    };
  },
});
</script>

<style lang="scss" scoped>
@mixin no-bg-color {
  background-color: transparent;
}
.app-bar {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  .bottom-navigation-big {
    @include no-bg-color;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    .var-bottom-navigation-item--active {
      @include no-bg-color;
    }
  }
}
</style>
